<%@ page language="java" contentType="text/html; charset=UTF-8"	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>字典编辑</title>
<link rel="stylesheet" href="<%=basePath %>/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="<%=basePath %>/plugins/bootstraptable/bootstrap-table.css">
    <link rel="stylesheet" href="<%=basePath %>/bootstrap/css/custom-theme/jquery-ui-1.9.2.custom.css">
    <link rel="stylesheet" href="<%=basePath%>/bootstrap/css/bootstrap-multiselect.css">
    <link rel="stylesheet" href="<%=basePath%>/bootstrap/css/bootstrap-datetimepicker.css">
    <link href="<%=basePath %>/plugins/bootstrapValidator/css/bootstrapValidator.min.css"  rel="stylesheet">
    
    
    <script src="<%=basePath %>/js/jquery.min.js"></script>
	<script src="<%=basePath %>/bootstrap/js/bootstrap.min.js"></script>
	<script src="<%=basePath %>/bootstrap/js/bootstrapQ.js"></script>
	<script src="<%=basePath %>/plugins/bootstraptable/bootstrap-table.js"></script>
	<script src="<%=basePath %>/plugins/bootstraptable/locale/bootstrap-table-zh-CN.js"></script>	
	<script src="<%=basePath %>/plugins/bootstraptable/locale/bootstrap-table-editable.js"></script>
	
	<script src="<%=basePath %>/plugins/bootstrapValidator/js/bootstrapValidator.min.js"></script>
	<script src="<%=basePath %>/plugins/bootstrapValidator/js/language/zh_CN.js"></script>
	<script src="<%=basePath%>/bootstrap/js/bootstrap-multiselect.js"></script>
	<script src="<%=basePath %>/js/util.js"></script>
    <script src="<%=basePath %>/plugins/layer/layer.js"></script>
	
	<link rel="stylesheet" href="<%=basePath%>/css/toastr.min.css">
	<script src="<%=basePath%>/js/toastr.min.js"></script>
	<script src="<%=basePath%>/js/toastrinit.js"></script>
	
	<script src="<%=basePath%>/bootstrap/js/bootstrap-datetimepicker.js"	charset="UTF-8"></script>
	<script	src="<%=basePath%>/bootstrap/js/locales/bootstrap-datetimepicker.zh-CN.js"	charset="UTF-8"></script>
<style> 
.table-hover>tbody>tr:hover{background-color:#C6E2FF}
</style>

<script type="text/javascript">
$(document).ready(function(){
	//控件初始化
	    $.ajax({
        url:"<%=basePath%>/dict/getMultiselect.do",
        type:"POST",
        dataType:"json",
        data:{dictionaryCode:"T_DICTIONARY_STATUS"},
        success:function(data){
            $("#status").multiselect({
                 enableFiltering: false,
                 maxHeight: 300
            });
            $("#status").multiselect('dataprovider',eval(data.jsonData));//数据初始化。如果有数据默认值，则需要参考最上面的代码
            $("#status").multiselect('select','${dictionary.status}' != '' ? '${dictionary.status}' : data.defaultVal); //默认选择值
            $("#status").multiselect('refresh'); //配合默认选择值进行刷新
        }    
	 });
	if("${dictionary.id}" ==""){
			$("#div_table").hide();
			$("#btn_add").hide();
	}
    //控件初始化完毕
    
  
	
	//在表中显示数据
    var url = '<%=basePath %>/dictItem/listDictionaryItem.do';
    $("#table").bootstrapTable({
    		/*数据参数清单*/
            method:'post',//请求方式
            url:url,//请求url
            dataType:'json',
            queryParams:queryParams,//传递参数
            contentType:'application/x-www-form-urlencoded',//请求数据内容格式
            /*样式参数清单*/ 
            //分页参数
            //pagination:true,//是否分页
        	//pageList: [10, 25, 50, 100],
			//pageSize:10,
			//pageNumber:1,
			//sidePagination:'server',
           // showRefresh: true,//是否显示刷新按钮
            striped:true,//行间隔色
            locale:"${language}" ,
            toolbar:"#toolbar",
            clickToSelect:true,
            onClickRow: function (row,$element) {
           	   $element.addClass('info').siblings().removeClass('info').end();
           	}
       });
    //在初始化和查询要传递的参数
    function queryParams(params){	
        return {
        	dictionaryId : $("#dictionaryId").val() =='' ? '-1' : $("#dictionaryId").val() ,
        	limit : params.limit ,
			offset : params.offset
        };
    };
    
   
    //查询按钮的点击事件
    $("#btn_query").click(function(){
        $("#table").bootstrapTable('refresh');
    });

    //添加
    $("#dict_form").bootstrapValidator();
    $("#btn_save").click(function(){
    	  var bootstrapValidator = $("#dict_form").data('bootstrapValidator');
    	  bootstrapValidator.resetForm(); //每次验证前都重置验证状态
    	  bootstrapValidator.validate();
    	  if(! bootstrapValidator.isValid()){
    	       return false;
    	  }
    	$.ajax({
    		type:"POST",
			dataType:"json",
            url:"<%=basePath%>/dict/save.do",
            data:{
            	id: $("#dictionaryId").val(), 
            	dictionaryCode: $("#dictionaryCode").val(),
            	dictionaryName: $("#dictionaryName").val(),
            	description: $("#description").val(),
            	status: $("#status").val()
            },
            success:function(data){
            	if(data.msg == 'error'){
            		toastr.error("<spring:message code='dict.repetition' />");
            	}else{
            		toastr.success("<spring:message code='dict.success' />");
                	$("#dictionaryId").val(data.id);
               	    $("#div_table").show();
               		$("#btn_add").show();
                 }           	 
            }
    	 });
    });
    //添加
    $("#btn_add").click(function(){
    	layer.open({
			  id:'dictionary_item_edit',
			  type: 2,
			  title:"<spring:message code='dict.add.dictitem' />",
			  area: ['500px', '400px'],
			  content: '<%=basePath %>/dictItem/toCreatePage.do?dictionaryId='+ $("#dictionaryId").val()
		});
    });
   
});//document结束

function orderFormatter(value,row,index){
	return index+1;
}


//是否为默认
function isDefault_formatter(value, row, index) {
	if(row.isDefault =='1'){
		   return [
		           '<span class="glyphicon glyphicon-ok"  style="font-size:15px;"></span>',
		          ].join('');
	}else{
		   return [
		          ].join('');
	}
};




//字典操作按钮
function operateFormatter(value, row, index) {
	return [
	    '<a class="edit ml10" href="javascript:void(0)" title="<spring:message code='base.edit' />">',
	        '<span class="glyphicon glyphicon-edit "  style="font-size:15px;"></span>',
	    '</a>',
	    '&nbsp;&nbsp;&nbsp;&nbsp;',
    	'<a class="delete_true ml10" href="javascript:void(0)" title="<spring:message code='base.delete.true' />">',
        	'<span class="glyphicon glyphicon-exclamation-sign text-danger"  style="font-size:15px;"></span>',
        '</a>',
	].join('');
}



//操作功能
window.operateEvents = {
		//编辑字典明细
		'click a.edit': function (e, value, row, index) {
			layer.open({
				  id:'dictionary_edit',
				  type: 2,
				  title:row.itemName,
				  area: ['500px', '400px'],
				  content: '<%=basePath %>/dictItem/toEditPage.do?dictionaryItemId='+row.id
			});
		 } ,
		 'click a.delete_true': function (e, value, row, index) {

				bootstrapQ.confirm({
					title:"<spring:message code='base.alert.title' />",
	      			msg:"<spring:message code='dict.deleteture.alert' />"   
	      		},function(){
	      			$.ajax({
	      	    		type:"POST",
	      				dataType:"json",
	      	            url:"<%=basePath%>/dictItem/delete.do",
	      	            data:{
	      	            	dictionaryItemId:row.id 
	      	            },
	      	            success:function(data){
	      	            	if(data.msg == 'success'){
	      	            		toastr.success("<spring:message code='base.success' />"); 
	      	            	    $("#table").bootstrapTable('refresh');
	      	           		 }
	      	            },error:function(data){
	      	            	toastr.error("<spring:message code='base.error' />"); 
	      	            }
	      	    	 });
	       		});
		 } 
} ;
</script>

</head>
<body >
<br/>
<div class="container">

	<div class="row clearfix">
	<!-- 字典主数据 -->	
		<form class="form-horizontal" id = "dict_form">
		  <input type="text" class="form-control hide" id="dictionaryId" value="${dictionary.id}" >
		  <div class="form-group">
		    <label for="dictionaryCode" class="col-sm-2 control-label">*<spring:message code='dict.dictionarycode' /></label>
		    <div class="col-sm-8">
		      <input type="text" class="form-control" id="dictionaryCode" name ="dictionaryCode"  value="${dictionary.dictionaryCode}" required >
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="dictionaryName" class="col-sm-2 control-label">*<spring:message code='dict.dictionaryname' /></label>
		    <div class="col-sm-8">
		      <input type="text" class="form-control" id="dictionaryName" name ="dictionaryName"  value="${dictionary.dictionaryName}" required  >
		    </div>
		  </div>
		  <div class="form-group">
		    <label for="description" class="col-sm-2 control-label"><spring:message code='dict.description' /></label>
		    <div class="col-sm-8">
		      <input type="text" class="form-control" id="description" name ="description" value="${dictionary.description}">
		    </div>
		  </div>
		  <div class="form-group hide">
		    <label for="parentId" class="col-sm-2 control-label"><spring:message code='dict.parent' /></label>
		    <div class="col-sm-8">
		      <select id="parentId"  name ="parentId" class="form-control"></select>
		    </div>
		  </div> 
		  <div class="form-group">
		    <label for="status" class="col-sm-2 control-label"><spring:message code='dict.status' /></label>
		    <div class="col-sm-8">
		      <select id="status" name ="status" class="form-control" required  ></select>
		    </div>
		  </div>
		</form>
	</div>
	<div  style="text-align:center">   
	  <button id="btn_save" 	type="button" class="btn btn-primary"><spring:message code='base.save' /></button>
	  <button id="btn_add" 	type="button" class="btn btn-primary"><spring:message code='dict.add.dictitem' /></button>
	</div>
	<div id ="div_table" class="row clearfix">
		<!-- 字典明细项数据 -->
		<div class="col-xs-12 column">
		
			<table id="table"  class="table table-hover">
				<thead>    
					<tr>
						<th data-field="listOrder"><spring:message code='dict.item.listOrder' /></th>	
						<th data-field="itemValue" ><spring:message code='dict.item.itemValue' /></th>
						<th data-field="itemName" ><spring:message code='dict.item.itemName' /></th>
						<th data-field="itemNameEn" ><spring:message code='dict.item.itemNameEn' /></th>
						<th data-field="isDefault" data-formatter="isDefault_formatter"><spring:message code='dict.item.isDefault' /></th>	
						<th data-field="statusName" ><spring:message code='dict.item.status' /></th>
						<th data-field="operation" data-formatter="operateFormatter" data-events="operateEvents"><spring:message code='base.operate' /></th>
					</tr>
				</thead>
			</table>
		</div>
	</div>
	
</div>

</body>
</html>